<template>
    <div>
        <div class="outer">
            <a-form :label-col="{span: 2}" :wrapper-col="{span: 14}">
                <a-form-item label="网站名称">
                    <a-input v-model:value="formData.title"/>
                </a-form-item>
				<a-form-item label="网站简称">
				    <a-input v-model:value="formData.title_abbr"/>
				</a-form-item>
				<a-form-item label="网站标题">
                    <a-input v-model:value="formData.platform"/>
                </a-form-item>
                <a-form-item label="网站关键词">
                    <a-input v-model:value="formData.keywords"/>
                </a-form-item>
                <a-form-item label="网站描述">
                    <a-input v-model:value="formData.description"/>
                </a-form-item>
				<a-form-item label="网站LOGO">
					<a-input v-model:value="formData.logo" />
					<upLoadImg v-if="formData.logo" :num="1" @updateImg="logoUpdate" :imgUrls="logoUrl" class="m-t-5" @deleteImg="deleteLogoImg"></upLoadImg>
				</a-form-item>
				<a-form-item label="公众号二维码">
					<a-input v-model:value="formData.platform_wechat"/>
					<upLoadImg v-if="formData.platform_wechat" :num="1" @updateImg="wechatUpdate" :imgUrls="wechatUrl" class="m-t-5" @deleteImg="deleteWechatImg"></upLoadImg>
				</a-form-item>
				<a-form-item label="QQ号">
				    <a-input v-model:value="formData.qq"/>
				</a-form-item>
				<a-form-item label="邮箱号">
				    <a-input v-model:value="formData.email"/>
				</a-form-item>
				<a-form-item label="手机号">
				    <a-input v-model:value="formData.phone"/>
				</a-form-item>
				<a-form-item label="创作中心域名">
				    <a-input v-model:value="formData.mpUrl" placeholder="创作中心域名" />
				</a-form-item>
                <a-form-item label="ICP备案号">
                    <a-input v-model:value="formData.icp"/>
                </a-form-item>
                <a-form-item label="版权信息">
                    <a-input v-model:value="formData.copyright"/>
                </a-form-item>
                <a-form-item class="marginButton" :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" @click="onSubmit">保存</a-button>
                </a-form-item>
            </a-form>
        </div>

    </div>
</template>
<script >
    import upLoadImg from '../../components/upImage.vue'
	import systemApi from '../../api/system.js'
  
    export default {
        components: {
        	upLoadImg
        },
        data(){
            return{
                number:3,
                formData:{
                    title:'',
                    title_abbr:'',
                    platform:'',
                    keywords:'',
                    description:'',
                    logo:'',
                    platform_wechat:'',
                    qq:'',
                    email:'',
                    icp:'',
                    copyright:'',
                    phone:'',
					mpUrl:''
                },
               
				logoUrl: [],
				wechatUrl: [],
            }
        },
        mounted() {
			this.getSystemConfig()
        },
        methods: {			
			getSystemConfig(){
				systemApi.getSystemConfig().then(res => {
					this.formData = res.result
					this.logoUrl = [{
						uid: 'logo',
						url: res.result.logo
					}]
					this.wechatUrl = [{
						uid: 'wechatUrl',
						url: res.result.platform_wechat
					}]
				});
			},
            onSubmit() {
				systemApi.systemConfig(this.formData).then(res => {
					if(res.status == 1){
						this.$message.success('修改成功')
					}
				})
            },
			// logo上传
			logoUpdate(e) {
				this.formData.logo = e.url
			},
			// 删除logo
			deleteLogoImg(e){
			    delete this.logoUrl[e]
			},
			// 微信二维码上传
			wechatUpdate(e) {
				this.formData.platform_wechat = e.url
			},
			// 删除微信二维码
			deleteWechatImg(e){
			    delete this.wechatUrl[e]
			},
        }
    }

</script>

<style scoped>
    .outer{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ant-form {
        width: 100%;
    }
    .ant-span{
        padding: 5px;
        background-color: #F0AD4E;
        border-radius: 6px;
    }
    .ant-spanTwo[data-v-10f1d219] {
        display: inline-block;
        width: 80px;
        height: 28px;
        border-radius: 6px;
    }
    .ant-spanTwo img{
        width: 100%;
        height: 100%;
    }
    .marginButton{
        margin-left: -125px;
    }
</style>
